import { createApp } from 'vue'
import App from './App.vue'
import Router from './router/index.js'
import VueMarkdownEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import VueCropper from 'vue-cropper';
import '@kangc/v-md-editor/lib/style/preview.css';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import createTipPlugin from '@kangc/v-md-editor/lib/plugins/tip/index';
import '@kangc/v-md-editor/lib/plugins/tip/tip.css';
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';
import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/cdn';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';
// import 'element-plus/theme-chalk/dark/css-vars.css'

// highlightjs
import hljs from 'highlight.js';

import Codemirror from 'codemirror';

import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/vue/vue';
// edit
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/matchbrackets';
// placeholder
import 'codemirror/addon/display/placeholder';
// active-line
import 'codemirror/addon/selection/active-line';
// scrollbar
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
// style
import 'codemirror/lib/codemirror.css';
import 'vue-cropper/dist/index.css'

VueMarkdownEditor.Codemirror = Codemirror;

VueMarkdownEditor.use(githubTheme, {
    Hljs: hljs,
});

VueMarkdownEditor.use(createTipPlugin());
VueMarkdownEditor.use(createEmojiPlugin());
VueMarkdownEditor.use(createCopyCodePlugin());
VueMarkdownEditor.use(createKatexPlugin());

VMdPreview.use(githubTheme, {
    Hljs: hljs,
});
VMdPreview.use(createKatexPlugin())
VMdPreview.use(createCopyCodePlugin());

const changeTitle = (el,binding) => {
    const {value} = binding;
    if(el.dataset.title){
        document.title = el.dataset.title;
    }else if(value && value.title){
        document.title = value.title;
    }
    if(el.dataset.describe){
        document.describe = el.dataset.describe
    }
}


const app = createApp(App)

app.directive('blog-title',{
    mounted: (el,binding) => {
        changeTitle(el,binding)
    },
    updated: (el,binding) => {
        changeTitle(el,binding)
    }
})

app.use(Router)
app.use(VueMarkdownEditor)
app.use(VueCropper)
app.use(VMdPreview)

app.mount('#app')
